{% extends 'join/base.html.twig' %}
{% set fullwidth = true %}
{% block header %}

    {{ room.name }}
{% endblock %}
{% block content %}

    <div class=" col-12 ">
        <div class="row d-flex justify-content-center mb-3" id="webcamRow">

            <div class="col-lg-6 col-xl-7 position-relative overflow-y-scroll" id="webcamCol">
                <div class="messageContainer"></div>
                <div class="card webcamArea" id="webcamArea">
                    <div class="accessAllowed d-none">
                        <p class="small textAllow">{{ 'lobby.participants.noch'|trans }}</p>
                        <div id="lobby_participant_counter" class="textAllow"></div>
                        <p class="small textAllow">{{ 'lobby.participants.seconds'|trans }}</p>
                        <a id="stopEntry"
                           class="btn btn-lg btn-outline-primary"
                           data-alternativ="{{ 'lobby.participant.enterNow'|trans }}">{{ 'lobby.participant.pauseEnter'|trans }}</a>

                    </div>
                    <div class="overlay">

                        <h4 class="text-center">{{ 'lobby.participant.pleaseWait'|trans }}</h4>
                    </div>
                    <video autoplay="true" id="lobbyWebcam"></video>
                    <div class="webcamToolbar">
                        <i class="fa fa-video" id="webcamSwitch"></i>
                        {{ user.showName }}
                        {% if user.user is not null %}
                            {% if user == room.moderator %}
                                <i class="fa fa-star"></i>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
            </div>

            {% if getApplicationProperties('LAF_SHOW_PARTICIPANTS_ON_PARTICIPANTS') %}
                <div class="col-lg-6 col-xl-5 d-none d-lg-block lobbyPartList">
                    <div class=" card card-body h-100">
                        <h5><b>{{ 'Teilnehmer'|trans }}</b></h5>
                        <ul class="list-group overflow-y-scroll border-none">
                            {% set inRoom= [] %}
                            {% for u in RoomStatusOccupats(room) |sort((a, b) => a.participantName <=> b.participantName) %}
                                {% set inRoom = inRoom|merge([u.participantName]) %}
                                <li class="list-group-item lobbyPart d-flex justify-content-between pe-2" data-status="online"><p class="part-text">{{ u.participantName }}</p><div class="dot with-icon onlineDotJoin" data-mdb-toggle="tooltip" title="{{'lobby.participant.online'|trans}}"></div> </li>
                            {% endfor %}
                            {% for u in room.user|sort((a, b) => a.formatedName(laf_showNameInConference) <=> b.formatedName(laf_showNameInConference)) %}
                                {% if  u.formatedName(laf_showNameInConference) not in inRoom %}
                                    <li class="list-group-item lobbyPart pe-2"><p class="part-text">{{ u.formatedName(laf_showNameInConference) }}</p></li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    </div>


                </div>
            {% endif %}

        </div>
        <div class="row ">
            <div class="col-12 d-flex flex-column flex-md-row justify-content-around">
                <div class="row">
                    <div class="col-lg-4">
                        <a class="caretdown btn btn-primary  overflow-hidden dropdown-toggle d-flex align-items-md-center w-100" type="button"
                           id="selectWebcamDropdown"
                           data-mdb-toggle="dropdown" aria-haspopup="true"
                           aria-expanded="false"><i class="me-2 fa fa-video"></i><span
                                    class="  w-100 text-ellipsis  text-center">{{ 'lobby.noWebCamFound'|trans }}</span>
                        </a>
                        <ul class="dropdown-menu p-1" aria-labelledby="dropdownMenu1" id="webcamSelect">
                        </ul>
                    </div>
                    <div class="col-lg-4">
                        <div class="btn-group w-100">
                            <a type="button"
                               class="btn btn-primary dropdown-toggle caretdown px-3 d-flex align-items-center"
                               data-mdb-toggle="dropdown"
                               data-mdb-reference="parent"
                               aria-haspopup="true" aria-expanded="false">
                                <i class="fas fa-microphone"></i>
                            </a>
                            <div class="dropdown-menu">
                                <div id="audioInputSelect">
                                    <a class="dropdown-item"><b>{{ 'lobby.echo.input'|trans }}</b></a>
                                </div>
                            </div>
                            <a type="button" class="btn btn-primary text-nowrap" id="startEcho"
                               data-texton="{{ 'lobby.start.echo'|trans }}"
                               data-textoff="{{ 'lobby.stop.echo'|trans }}">{{ 'lobby.start.echo'|trans }}</a>

                        </div>
                    </div>
                    <div class="col-lg-4">
                        <a href="{{ path('lobby_participants_renew',{'userUid':user.uid}) }}" id="renewParticipant"
                           class="btn btn-outline-primary renew w-100">{{ 'lobby.renew'|trans }}</a>
                    </div>
                </div>
            </div>
<hr class="mt-3 mb-3">
            <div class="col-12 d-flex justify-content-end">

                <a href="{{ path('lobby_participants_leave',{'userUid':user.uid}) }}" id="leavParticipant"
                   class="btn btn-outline-danger leave">{{ 'lobby.exit'|trans }}</a>
            </div>
        </div>


    </div>

    <div class="w-100" id="jitsiWindow">
        {% block sidebar %}
            {% embed('conference_modules/conferenceSidebar.html.twig') with {'room': room} %}
                {% block extension %}
                    {% if room.totalOpenRooms == true %}
                        {% include 'conference_modules/inviteUsersToOpenRooms.html.twig' with {'url':path('own_room_startPage',{'uid':room.uid})} %}
                    {% endif %}
                {% endblock %}
            {% endembed %}
        {% endblock %}
    </div>


{% endblock %}
{% block script %}
    {% include('__checkFirefox.html.twig') with {'room':room} %}
    <script src='https://{{ room.server.url }}/external_api.js'></script>
    <script>
        var reknockingTime = {{ laf_lobby_ReKnockTime }};
        var type = '{{ type }}';
        {% if user.user is defined and user.user is not null %}
        {% set topics = [
            'lobby_WaitingUser_websocket/'~ user.uid,
            'lobby_broadcast_websocket/'~room.uidReal,
            'lobby_personal'~room.uidReal~user.user.uid,
            'whiteboard/'~room.uidReal
        ] %}
        {% else %}
        {% set topics = [
            'lobby_WaitingUser_websocket/'~ user.uid,
            'lobby_broadcast_websocket/'~room.uidReal,
            'whiteboard/'~room.uidReal
        ] %}
        {% endif %}
        var topic ={{ mercure(topics)|json_encode(constant('JSON_UNESCAPED_SLASHES') b-or constant('JSON_HEX_TAG'))|raw }};
        var websocketTopics = "{{ getJwtforWebsocket(topics,app.user) }}";
        var hangupText = "{{ 'Ja'|trans }}";
        var hangupQuestion = "{{ 'lobby.endMeeting.ask.participant'|trans }}";
        var cancel = "{{ "Abbrechen"|trans }}";
        var removeUrl = '{{ path('lobby_participants_leave',{'roomUid':room.uidReal,'userUid':user.uid}) }}';
        {% set content %}{% include 'lobby_participants/endMeeting.html.twig' with {'url':'/'} %}{% endset %}
        var endModal = '{{ content|replace({"\n":'',})|escape('js') }}';

        var popUpDuration = {{ laf_lobby_popUpDuration }};

        var browserLeave = '{{ path('lobby_participants_browser_leave',{'userUid':user.uid}) }}'
        var healthcheckUrl = '{{ path('lobby_participants_healthCheck',{'userUid':user.uid}) }}'
        var urlWebsocketReady = '{{ path('lobby_participants_websocket_ready',{'userUid':user.uid}) }}'
    </script>
{% endblock %}
{% block webpack %}
    {{ encore_entry_script_tags('lobbyParticipant') }}
{% endblock %}
